<template>
  <div class="searchResult">
    <navbar title="搜索结果" @back="back"></navbar>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="searchList">
        <div class="result" v-for="(item, index) in resultsList" :key="index">
          <div class="title" @click="toDetail(item)">
            <h4>{{ item.title }}</h4>
            <van-grid :column-num="3" :border="false">
              <van-grid-item
                v-for="(myitem, myindex) in item.cover.images"
                :key="myindex"
              >
                <van-image :src="myitem" />
              </van-grid-item>
            </van-grid>
            <div class="msgbox">
              <div class="item">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | findTime }}</span>
              </div>
            </div>
          </div>
          <div class="grid">
            <van-grid :column-num="3" direction="horizontal">
              <van-grid-item
                icon="comment-o"
                :text="item.comm_count.toString()"
              />
              <van-grid-item icon="like-o" text="点赞" />
              <van-grid-item icon="exchange" text="分享" />
            </van-grid>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
// 导入网络请求模块
import { getData } from '../../../api/search'
export default {
  name: 'searchResult',
  data () {
    return {
      // 页面传递过来的值
      //   数据列表
      resultsList: [],
      finished: false,
      loading: false,
      total_count: 0,
      page: 0
    }
  },
  methods: {
    // 点击跳转详情页
    toDetail (item) {
      // console.log(item.art_id)
      this.$router.push(`/detail/${item.art_id}`)
    },
    //   点击回退事件
    back () {
      this.$router.push('/search')
    },
    async onLoad () {
      this.page += 1
      const q = this.$route.params.q
      console.log(q)
      // 发起请求 添加数据
      const res = await getData({
        q: q,
        page: this.page
      })
      console.log(res)
      // 通过 push的方法添加   。。。展开语法
      const arr = res.data.data.results
      this.resultsList.push(...arr)
      console.log(this.resultsList)
      //  赋值
      this.total_count = res.data.data.total_count
      this.loading = false
      // 判断是否 到了总条数
      if (this.resultsList.length === this.total_count) {
        this.finished = true
      }
    }
  }
  //   // 生命周期钩子渲染页面
  //   async created () {

  //   }
}
</script>

<style lang="less" scoped>
.searchResult {
  .searchList {
    .result {
      .title {
        h4 {
          padding: 15px;
          font-size: 0.37333rem;
          line-height: 0.64rem;
        }
        .van-grid {
          display: flex;
          /deep/ .van-image {
            flex: 1;
          }
        }
        .msgbox {
          padding: 10px 15px;
          color: #b4b4b4;
          font-size: 12px;
          line-height: 12px;
          span {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
